<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动列表 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/activities.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="header-left">
                <a href="../index.html" class="back-btn">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <h1 class="page-title">推荐活动</h1>
            </div>
            <div class="header-right">
                <i class="bi bi-search"></i>
                <i class="bi bi-sliders"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 筛选栏 -->
            <section class="filter-section">
                <div class="filter-tabs">
                    <div class="tab active">全部</div>
                    <div class="tab">职业讲座</div>
                    <div class="tab">企业开放日</div>
                    <div class="tab">技能竞赛</div>
                    <div class="tab">实习宣讲</div>
                    <div class="tab">创业活动</div>
                </div>
                <div class="filter-options">
                    <div class="filter-row">
                        <div class="filter-item">
                            <span class="filter-label">时间:</span>
                            <div class="select-wrapper">
                                <select name="time" id="time-filter">
                                    <option value="all">全部时间</option>
                                    <option value="today">今天</option>
                                    <option value="tomorrow">明天</option>
                                    <option value="this-week">本周</option>
                                    <option value="next-week">下周</option>
                                    <option value="this-month">本月</option>
                                </select>
                                <i class="bi bi-chevron-down"></i>
                            </div>
                        </div>
                        <div class="filter-item">
                            <span class="filter-label">状态:</span>
                            <div class="select-wrapper">
                                <select name="status" id="status-filter">
                                    <option value="all">全部状态</option>
                                    <option value="upcoming">即将开始</option>
                                    <option value="ongoing">进行中</option>
                                    <option value="ended">已结束</option>
                                </select>
                                <i class="bi bi-chevron-down"></i>
                            </div>
                        </div>
                        <div class="filter-item">
                            <span class="filter-label">形式:</span>
                            <div class="select-wrapper">
                                <select name="format" id="format-filter">
                                    <option value="all">全部形式</option>
                                    <option value="online">线上</option>
                                    <option value="offline">线下</option>
                                    <option value="hybrid">线上+线下</option>
                                </select>
                                <i class="bi bi-chevron-down"></i>
                            </div>
                        </div>
                    </div>
                    <div class="sort-row">
                        <span class="sort-label">排序:</span>
                        <div class="sort-options">
                            <span class="sort-option active" data-sort="time">时间优先</span>
                            <span class="sort-option" data-sort="popular">热度优先</span>
                            <span class="sort-option" data-sort="recent">最近添加</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 活动列表 -->
            <section class="activities-list">
                <a href="activity-detail.html?id=1" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity1.jpg" alt="互联网产品经理实战营" data-category="activity">
                        <span class="status ongoing">进行中</span>
                    </div>
                    <div class="activity-info">
                        <h3>互联网产品经理实战营</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-15 14:00-16:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 132人参与</span>
                            <span class="category">职业讲座</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=2" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity2.jpg" alt="腾讯2023校园招聘宣讲会" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>腾讯2023校园招聘宣讲会</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-20 10:00-12:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 北京大学就业中心</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 415人参与</span>
                            <span class="category">企业开放日</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=3" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity3.jpg" alt="2023全国大学生编程大赛" data-category="activity">
                        <span class="status ended">已结束</span>
                    </div>
                    <div class="activity-info">
                        <h3>2023全国大学生编程大赛</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-03-25 09:00-18:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 3240人参与</span>
                            <span class="category">技能竞赛</span>
                            <button class="register-btn disabled">已结束</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=4" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity4.jpg" alt="金融行业求职经验分享会" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>金融行业求职经验分享会</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-18 19:00-21:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 283人参与</span>
                            <span class="category">职业讲座</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=5" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity5.jpg" alt="阿里巴巴技术开放日" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>阿里巴巴技术开放日</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-25 14:00-17:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 杭州市余杭区阿里巴巴西溪园区</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 198人参与</span>
                            <span class="category">企业开放日</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=6" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity6.jpg" alt="创新创业项目路演" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>创新创业项目路演</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-05-05 13:30-17:30</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 北京大学创新创业中心</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 142人参与</span>
                            <span class="category">创业活动</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=7" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity7.jpg" alt="简历优化与面试技巧工作坊" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>简历优化与面试技巧工作坊</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-22 09:30-11:30</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 265人参与</span>
                            <span class="category">职业讲座</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>

                <a href="activity-detail.html?id=8" class="activity-item">
                    <div class="activity-img">
                        <img src="../img/activity8.jpg" alt="微软2023实习生招募宣讲会" data-category="activity">
                        <span class="status upcoming">即将开始</span>
                    </div>
                    <div class="activity-info">
                        <h3>微软2023实习生招募宣讲会</h3>
                        <p class="time"><i class="bi bi-calendar"></i> 2023-04-30 14:00-16:00</p>
                        <p class="location"><i class="bi bi-geo-alt"></i> 线上+清华大学</p>
                        <div class="activity-meta">
                            <span class="participants"><i class="bi bi-people"></i> 376人参与</span>
                            <span class="category">实习宣讲</span>
                            <button class="register-btn">立即报名</button>
                        </div>
                    </div>
                </a>
            </section>

            <!-- 加载更多 -->
            <div class="load-more">
                <button class="load-more-btn">加载更多</button>
            </div>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <div class="tab-item" data-page="index">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" data-page="discovery">
                <i class="bi bi-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-item active" data-page="agents">
                <i class="bi bi-calendar-event-fill"></i>
                <span>活动</span>
            </div>
            <div class="tab-item" data-page="profile">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </div>
        </footer>
    </div>

    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>

    <script src="../js/main.js"></script>
    <script src="../js/activities.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 处理报名按钮点击，阻止事件冒泡，直接跳转到详情页的报名
            const registerBtns = document.querySelectorAll('.register-btn');
            registerBtns.forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 如果是已结束状态，不做处理
                    if (this.classList.contains('disabled')) {
                        return;
                    }
                    
                    // 获取活动ID
                    const activityItem = this.closest('.activity-item');
                    const activityUrl = activityItem.getAttribute('href');
                    
                    // 跳转到详情页并自动打开报名表单
                    window.location.href = activityUrl + '&register=true';
                });
            });
            
            // 初始化筛选功能
            const tabs = document.querySelectorAll('.filter-tabs .tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    // 这里应该添加筛选逻辑
                });
            });
            
            // 初始化排序功能
            const sortOptions = document.querySelectorAll('.sort-option');
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    sortOptions.forEach(o => o.classList.remove('active'));
                    this.classList.add('active');
                    // 这里应该添加排序逻辑
                });
            });
            
            // 初始化加载更多功能
            const loadMoreBtn = document.querySelector('.load-more-btn');
            loadMoreBtn.addEventListener('click', function() {
                // 模拟加载更多
                setTimeout(() => {
                    showToast('没有更多活动了');
                    this.textContent = '已加载全部';
                    this.disabled = true;
                }, 1000);
            });
            
            // 初始化底部导航
            const tabItems = document.querySelectorAll('.tab-item');
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const page = this.getAttribute('data-page');
                    
                    // 如果点击的不是当前页，则跳转
                    if (!this.classList.contains('active')) {
                        switch (page) {
                            case 'index':
                                window.location.href = '../index.html';
                                break;
                            case 'discovery':
                                window.location.href = 'discover.html';
                                break;
                            case 'agents':
                                // 已经在当前页面
                                break;
                            case 'profile':
                                window.location.href = 'profile.html';
                                break;
                        }
                    }
                });
            });
        });
        
        // 显示提示消息
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
    </script>
</body>
</html> 